<template>
  <div id="approachEdit" style="position: relative;">
    <!--   基础信息   -->
    <div class="filter-box">
      <a-form-model ref="form" :rules="rules" :model="form" :label-col="{span: 8}" :wrapper-col="{span: 14}" >
        <div class="infoTitle">基础信息</div>
        <a-row class="info">
          <a-col :span="6">
            <a-form-model-item label="申请单" ref="phidApply" class="form-col" prop="phidApply">
              <a-input v-model="form.phidApply" placeholder="请选择申请单"  @click="showApplyDiag" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="处理登记单" class="form-col" prop="phidRegister">
              <a-input v-model="form.phidRegister" placeholder="请选择登记单编号"   @click="showRegisterDiag"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="组织" class="form-col" prop="orgName">
              <a-input v-model="form.orgName"  disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="区域" ref="complanyName" class="form-col" prop="complanyName">
              <a-select v-model="form.complanyName" placeholder="请选择区域"  allowClear="true" showSearch="true">
                <a-select-option v-for="option in area" :key="option.label" :value="option.value">{{option.label}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="info">
          <a-col :span="6">
            <a-form-model-item label="项目" ref="projectName" class="form-col" prop="projectName">
              <a-input v-model="form.projectName" placeholder="请输入项目" @click="showDiag" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="单据编码" class="form-col" prop="billcode">
              <a-input v-model="form.billcode"  :disabled="true" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="单据日期" class="form-col" prop="billdate" >
              <a-date-picker v-model="form.billdate" clearable  placeholder="请选择单据日期"
                             valueFormat="YYYY-MM-DD HH:mm:ss" :show-time="{ defaultValue: $moment('00:00:00', 'HH:mm:ss') }" >
              </a-date-picker>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="申请人" class="form-col" prop="registerName">
              <a-input v-model="form.registerName" placeholder="请输入申请人"  @click="showMemberDiag"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="info">
          <a-col :span="6">
            <a-form-model-item label="申请人电话" class="form-col" prop="telephone">
              <a-input v-model="form.telephone" placeholder="请申请人电话"  />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="申请人部门" class="form-col" prop="deptName">
              <a-input v-model="form.deptName" placeholder="请输入申请人部门"  @click="showDeptDiag"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="进场日期" class="form-col" prop="enterDate" >
              <a-date-picker v-model="form.enterDate" clearable placeholder="请选择进场日期"
                             valueFormat="YYYY-MM-DD HH:mm:ss" :show-time="{ defaultValue: $moment('00:00:00', 'HH:mm:ss') }" >
              </a-date-picker>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="进场门岗" class="form-col" prop="enterDoor">
              <a-input v-model="form.enterDoor" placeholder="请输入进场门岗"  />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="info">
          <a-col :span="6">
            <a-form-model-item label="进场原因" class="form-col" prop="enterMeno">
              <a-input v-model="form.enterMeno" placeholder="请输入进场门岗"  />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="车辆是否车牌" class="form-col" prop="hasCardnum">
              <a-select v-model="form.hasCardnum"  :showSearch="true" allowClear  placeholder="请选择车辆是否有车牌">
                <a-select-option :value="1" >{{"有"}} </a-select-option>
                <a-select-option :value="0" >{{"没有"}}  </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="车辆号码" class="form-col" prop="carNumber">
              <a-input v-model="form.carNumber" placeholder="请输入车辆号码" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="司机姓名" class="form-col" prop="driverName">
              <a-input v-model="form.driverName" placeholder="请输入司机姓名" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="info">

          <a-col :span="6">
            <a-form-model-item label="驾驶证号码" class="form-col" prop="driverLicense">
              <a-input v-model="form.driverLicense" placeholder="请输入驾驶证号码"  />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="行驶证上总重量(kg)" class="form-col" prop="carWeight">
              <a-input v-model="form.carWeight" placeholder="请输入行驶证上总重量" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="车辆毛重(kg)" class="form-col" prop="businessLicenseids">
              <a-input v-model="form.grossWeight" placeholder="请输入车辆毛重(kg)" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="车箱内尺寸" class="form-col" prop="carInnerSize">
              <a-input v-model="form.carInnerSize" placeholder="请输入车箱内尺寸"  />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="info">

          <a-col :span="6">
            <a-form-model-item label="车箱外尺寸" class="form-col" prop="carOuterSize">
              <a-input v-model="form.carOuterSize" placeholder="请输入车箱外尺寸"  />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="车型底厚" class="form-col" prop="carThickness">
              <a-input v-model="form.carThickness" placeholder="请输入车型底厚"  />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="单据类型编码" class="form-col" prop="billtype">
              <a-input  v-model="form.billtype" :disabled="true" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="单据状态" class="form-col" prop="billStatusName">
              <a-input v-model="form.billStatusName" :disabled="true" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="info">
          <a-col :span="6">
            <a-form-model-item label="备注" class="form-col" prop="memo">
              <a-input v-model="form.memo" placeholder="请输入备注"  />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>

      <!--   明细列表   -->
    <div class="filter-box">
      <div class="printJS-item">
        <div class="infoTitle">进场单明细</div>
        <div class="tableWrap">
          <DataTable rowKey="phid" :showConfig="false" :tableData="approachDetailVOList" :tableColumn="tableColumn" />
        </div>
      </div>
    </div>


<!--    <div class="filter-box">-->
<!--      <div class="printJS-item">-->
<!--        <div class="infoTitle">图片列表</div>-->
<!--        <div class="flex imgWrap">-->
<!--          <template v-for="item in fileList">-->
<!--            <img class="img-item" :key="item" :src="item.url" @click="showImg2(index,fileList)" />-->
<!--          </template>-->
<!--        </div>-->
<!--        <a-form-model-item label="相关附件" prop="fileList" class="form-col col-100 column">-->
<!--          <Btns :data="btns" justify="flex-start" />-->
<!--          <p class="form-tip">支持扩展名: .excel .doc .docx .pdf .jpg .png</p>-->
<!--          <div v-if="showUploadList.length">上传文件:</div>-->
<!--          <div v-if="showUploadList.length">-->
<!--            <div v-for="(item, index) in showUploadList" :key="index">{{item.url}}</div>-->
<!--          </div>-->
<!--        </a-form-model-item>-->
<!--      </div>-->
<!--      <a-button type="primary" @click="handleSubmit">保存</a-button>-->
<!--    </div>-->

    <!--   图片列表   -->
    <div class="filter-box">
      <div class="printJS-item">
        <div class="infoTitle">图片列表</div>
        <div class="flex imgWrap">
          <a-upload
            list-type="picture-card"
            :file-list="fileList"
            @preview="handlePreview"
            @change="handleChange"
            disabled
          >
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancels">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </div>
      </div>
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </div>

    <a-modal title="选择项目" :visible="formVisible" @cancel="hideFormVisible" :footer="null" width="50%" >
      <div>
        <div>
          <div>
            <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">项目：</div>
            <a-input-search placeholder="请选择项目名称 " style="width: 200px" v-model="searchProject.name" @search="searchWl"/>
          </div>
          <DataTable rowKey="phidProject"  :showConfig="false" :tableData="Data" :tableColumn="projectColumn" :pageConfig="pageConfig"></DataTable>
        </div>
      </div>
    </a-modal>

    <a-modal title="选择申请单" :visible="applyFormVisible" @cancel="hideApplyFormVisible" :footer="null" width="50%" >
      <div>
        <div>
          <div>
            <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">申请单：</div>
            <a-input-search placeholder="请选择申请单 " style="width: 200px" v-model="searchApply.name" @search="searchAly"/>
          </div>
          <DataTable rowKey="phidApply"  :showConfig="false" :tableData="Data" :tableColumn="applyBillColumn" :pageConfig="applyPageConfig"></DataTable>
        </div>
      </div>
    </a-modal>

    <a-modal title="选择申请人" :visible="memberFormVisible" @cancel="hideMemberFormVisible" :footer="null" width="50%" >
      <div>
        <div>
          <div>
            <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">人员名称：</div>
            <a-input-search placeholder="请选择申请人 " style="width: 200px" v-model="searchMember.name" @search="searchMem"/>
          </div>
          <DataTable rowKey="phidApplyman"  :showConfig="false" :tableData="Data" :tableColumn="memberColumn" :pageConfig="memberPageConfig"></DataTable>
        </div>
      </div>
    </a-modal>

    <a-modal title="选择申请人部门" :visible="deptFormVisible" @cancel="hideDeptFormVisible" :footer="null" width="50%" >
      <div>
        <div>
          <div>
            <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">部门名称：</div>
            <a-input-search placeholder="请选择申请人部门 " style="width: 200px" v-model="searchDept.name" @search="searchDepts"/>
          </div>
          <DataTable rowKey="phidDept"  :showConfig="false" :tableData="Data" :tableColumn="deptColumn" :pageConfig="deptPageConfig"></DataTable>
        </div>
      </div>
    </a-modal>

    <a-modal title="选择登记单" :visible="registerFormVisible" @cancel="hideRegisterFormVisible" :footer="null" width="50%" >
      <div>
        <div>
          <div>
            <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">登记单编码：</div>
            <a-input-search placeholder="请选择申请人 " style="width: 200px" v-model="searchRegister.name" @search="searchReg"/>
          </div>
          <DataTable rowKey="phidRegister"  :showConfig="false" :tableData="Data" :tableColumn="registerColumn" :pageConfig="registerPageConfig"></DataTable>
        </div>
      </div>
    </a-modal>

  </div>

</template>

<script lang="ts">
  import { Component, Vue, Watch } from 'vue-property-decorator';
  import {Validate} from '@/decorator';

  @Component
  export default class applyInvoiceEdit extends Vue {
    orgid: any = ''
    projectid: any = ''
    formVisible:any = false
    applyFormVisible:any = false
    memberFormVisible:any = false
    deptFormVisible:any = false
    registerFormVisible:any = false
    form: any = {
      phid: '',
      phidApply: '',
      telephone: '',
      phidRegister: '',
      complanyName: '',
      projectName: '',
      billcode: '',
      billdate: this.getCurrentData(),
      creatorName: '',
      deptName: '',
      enterDate: this.getCurrentData(),
      enterDoor: '',
      enterMeno: '',
      hasCardnum: '',
      carNumber: '',
      driverName: '',
      driverLicense: '',
      carWeight: '',
      grossWeight: '',
      carInnerSize: '',
      carOuterSize: '',
      carThickness: '',
      billtype: 'FJ002',
      billStatusName: '',
      memo: '',
      orgName: '',
      registerName: ''
    };
    // 表头信息
    approachHeadVO:any[] = []
    // 明细信息
    approachDetailVOList: any = {}
    // 图片信息
    fileList:any[] = []
    previewVisible: Boolean = false
    previewImage: any = ''

    searchProject: any = {
      name: ''
    }
    searchApply: any = {
      name: ''
    }
    searchMember: any = {
      name: ''
    }
    searchRegister: any = {
      name: ''
    }
    searchDept: any = {
      name: ''
    }
    rules: any = {
      phidApply: [{required: true, message: '请选择申请单', trigger: 'blur'}],
      billdate: [{required: true, message: '请输入单据日期', trigger: 'blur'}],
      carInnerSize: [{required: true, message: '请输入车厢内尺寸', trigger: 'blur'}],
      carOuterSize: [{required: true, message: '请输入车厢外尺寸', trigger: 'blur'}],
      carThickness: [{required: true, message: '请输入车厢底厚', trigger: 'blur'}],
      carWeight: [{required: true, message: '请输入行驶证上总重量', trigger: 'blur'}],
      driverLicense: [{required: true, message: '请输入驾驶证号码', trigger: 'blur'}],
      enterDate: [{required: true, message: '请输入进场日期', trigger: 'blur'}],
      enterDoor: [{required: true, message: '请输入进场门岗', trigger: 'blur'}],
      enterMeno: [{required: true, message: '请输入进场原因', trigger: 'blur'}],
      hasCardnum: [{required: true, message: '请选择车辆是否有牌', trigger: 'blur'}],
      registerName: [{required: true, message: '请选择申请人', trigger: 'blur'}],
      projectName: [{required: true, message: '请选择项目', trigger: 'blur'}],
      driverName: [{required: true, message: '请输入司机名称', trigger: 'blur'}],
      complanyName: [{required: true, message: '请选择区域', trigger: 'blur'}],
      telephone: [{required: true, message: '请输入申请人电话', trigger: 'blur'}]
    };
    projectList: any = [] // 项目列表

    btns: any[] = [
      {
        label: '上传文件',
        upload: true,
        accept: '.doc,.docx,.rar,.zip,.pdf,.jpg,.png',
        callback: (res: any) => this.uploadSuccess(res.fileList)
      }
    ]
    showUploadList: any = [] // 上传完图片展示
    countingTaskFileList: any = [] // 附件

    // 当前系统日期
    getCurrentData () {
      var d = new Date()
      return d.getFullYear() + '-' + ((d.getMonth() < 9 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1))) +
        '-' + (d.getDate() < 10 ? '0' + d.getDate() : d.getDate()) + ' ' + (d.getHours() < 10 ? '0' + d.getHours() : d.getHours()) +
        ':' + (d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()) + ':' + (d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds())
    }
    // 打开项目选择弹窗
    showDiag () {
      this.formVisible = true
      this.getProjectList()
    }

    // 打开申请单选择弹窗
    showApplyDiag () {
      this.applyFormVisible = true
      this.getApplyBillList()
    }

    // 打开登记单选择弹窗
    showRegisterDiag () {
      this.registerFormVisible = true
      this.getRegisterBillList()
    }


    // 打开人员选择弹窗
    showMemberDiag () {
      this.memberFormVisible = true
      this.getMemberList()
    }

    // 打开部门选择弹窗
    showDeptDiag () {
      this.deptFormVisible = true
      this.getDeptList()
    }

    // 关闭项目弹窗
    hideFormVisible () {
      this.formVisible = false;
    }

    // 关闭申请单弹窗
    hideApplyFormVisible () {
      this.applyFormVisible = false;
    }

    // 关闭申请人部门弹窗
    hideDeptFormVisible () {
      this.deptFormVisible = false;
    }

    // 关闭申请单弹窗
    hideMemberFormVisible () {
      this.memberFormVisible = false;
    }

    // 关闭登记单弹窗
    hideRegisterFormVisible () {
      this.registerFormVisible = false;
    }

    // 查询项目明细
    searchWl (val: any) {
      this.searchProject.name = val
      this.getProjectList()
    }

    // 查询申请单明细
    searchAly (val: any) {
      this.searchApply.name = val
      this.getApplyBillList()
    }

    // 查询人员列表
    searchMem (val: any) {
      this.searchMember.name = val
      this.getMemberList()
    }

    // 查询部门列表
    searchDepts (val: any) {
      this.searchDept.name = val
      this.getDeptList()
    }

    // 查询登记单列表
    searchReg (val: any) {
      this.searchRegister.name = val
      this.getRegisterBillList()
    }

    // 项目切换页面
    changePage (val: number) {
      this.pageConfig.current = val;
      this.getProjectList();
    }

    // 申请单切换页面
    applyChangePage (val: number) {
      this.applyPageConfig.current = val;
      this.getApplyBillList();
    }

    // 登记单切换页面
    registerChangePage (val: number) {
      this.registerPageConfig.current = val;
      this.getRegisterBillList();
    }

    // 人员列表切换页面
    memberChangePage (val: number) {
      this.memberPageConfig.current = val;
      this.getMemberList();
    }

    // 人员部门切换页面
    deptChangePage (val: number) {
      this.deptPageConfig.current = val;
      this.getDeptList();
    }

    // 分页参数
    pageConfig: any = {
      current: 1,
      total: 10,
      pageSize: 5,
      onChange: this.changePage
    };

    // 申请单分页参数
    applyPageConfig: any = {
      current: 1,
      total: 10,
      pageSize: 5,
      onChange: this.applyChangePage
    };

    // 登记单分页参数
    registerPageConfig: any = {
      current: 1,
      total: 10,
      pageSize: 5,
      onChange: this.registerChangePage
    }

    // 人员列表分页参数
    memberPageConfig: any = {
      current: 1,
      total: 10,
      pageSize: 5,
      onChange: this.memberChangePage
    };

    // 人员列表分页参数
    deptPageConfig: any = {
      current: 1,
      total: 10,
      pageSize: 5,
      onChange: this.deptChangePage
    };

    // 获取项目列表
    getProjectList () {
      let word = this.searchProject.name
      let { current, pageSize } = this.pageConfig
      let data: any = {}
      data.page = current
      data.size = pageSize
      if (word) {
        data.searchValue = word
      }
      this.$api.docInfoProjectListFetch(data).then((res: any) => {
        this.Data = res.data.records
        this.pageConfig.total = res.data.total;
      }).catch()
    }

    // 预览图片处理
    getBase64 (file: any) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
      });
    }
    // 关闭预览
    handleCancels () {
      this.previewVisible = false
    }

    // 打开预览
    async handlePreview (file: any) {
      if (!file.url && !file.preview) {
        file.preview = await this.getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    }
    // 切换预览
    handleChange ({ fileList }: any) {
      this.fileList = fileList;
    }

    // 获取申请单列表
    getApplyBillList () {
      let word = this.searchApply.name
      let { current, pageSize } = this.applyPageConfig
      let data: any = {}
      data.page = current
      data.size = pageSize
      if (word) {
        data.billcode = word
      }
      this.$api.dealApplyListFetch(data).then((res: any) => {
        this.Data = res.data.records
        this.applyPageConfig.total = res.data.total;
      }).catch()
    }

    // 获取登记单列表
    getRegisterBillList () {
      let word = this.searchRegister.name
      let { current, pageSize } = this.registerPageConfig
      let data: any = {}
      data.page = current
      data.size = pageSize
      if (word) {
        data.billcode = word
      }
      this.$api.registerListFetch(data).then((res: any) => {
        this.Data = res.data.records
        this.registerPageConfig.total = res.data.total;
      }).catch()
    }

    // 获取人员列表
    getMemberList () {
      let word = this.searchMember.name
      let { current, pageSize } = this.memberPageConfig
      let data: any = {}
      data.page = current
      data.size = pageSize
      if (word) {
        data.searchValue = word
      }
      this.$api.docInfoMemberListFetch(data).then((res: any) => {
        this.Data = res.data.records
        this.memberPageConfig.total = res.data.total;
      }).catch()
    }

    // 获取部门列表
    getDeptList () {
      let word = this.searchDept.name
      let { current, pageSize } = this.deptPageConfig
      let data: any = {}
      data.page = current
      data.size = pageSize
      if (word) {
        data.searchValue = word
      }
      this.$api.docInfoDeptListFetch(data).then((res: any) => {
        this.Data = res.data.records
        this.deptPageConfig.total = res.data.total;
      }).catch()
    }

    getAreaList () {
      let data: any = { page: '1', size: '99' }
      this.$api.docInfoAreaListFetch(data).then((res: any) => {
        res.data.records.map((item: any) => { item.label = item.name; item.value = item.phid + '-' + item.name })
        this.area = res.data.records
      }).catch()
    }

    showImg2 (index:any, arr:any) {
      this.$viewerApi({
        options: {
          initialViewIndex: index
        },
        images: arr
      })
    }
    Data: any[] = [];
    // 项目弹窗明细
    projectColumn: any = {
      ncProjectId: {
        label: '项目编码',
        minWidth: 60
      },
      ncProjectName: {
        label: '项目名称',
        minWidth: 140,
        hidden: true
      },
      action: {
        label: '操作',
        width: 100,
        template: [
          {
            tag: 'a',
            text: '确定',
            callback: this.confirmProject
          }
        ]
      }
    };

    // 申请单弹窗明细
    applyBillColumn: any = {
      billcode: {
        label: '申请单编码',
        minWidth: 60
      },
      billdate: {
        label: '申请单日期',
        minWidth: 60
      },
      projectName: {
        label: '项目',
        minWidth: 100
      },
      action: {
        label: '操作',
        width: 100,
        template: [
          {
            tag: 'a',
            text: '确定',
            callback: this.confirmApply
          }
        ]
      }
    };

    // 登记单弹窗明细
    registerColumn: any = {
      billcode: {
        label: '登记单编码',
        minWidth: 60
      },
      billdate: {
        label: '登记单日期',
        minWidth: 60
      },
      projectName: {
        label: '项目',
        minWidth: 100
      },
      action: {
        label: '操作',
        width: 100,
        template: [
          {
            tag: 'a',
            text: '确定',
            callback: this.confirmRegister
          }
        ]
      }
    };

    // 人员弹窗明细
    memberColumn: any = {
      memberAccount: {
        label: '人员账号',
        minWidth: 60
      },
      memberName: {
        label: '人员名称',
        minWidth: 60
      },
      memberPhone: {
        label: '电话',
        minWidth: 60
      },
      action: {
        label: '操作',
        width: 100,
        template: [
          {
            tag: 'a',
            text: '确定',
            callback: this.confirmMember
          }
        ]
      }
    };

    // 部门弹窗明细
    deptColumn: any = {
      deptCode: {
        label: '部门编码',
        minWidth: 60
      },
      deptName: {
        label: '部门名称',
        minWidth: 60
      },
      orgName: {
        label: '组织名称',
        minWidth: 60
      },
      action: {
        label: '操作',
        width: 100,
        template: [
          {
            tag: 'a',
            text: '确定',
            callback: this.confirmDept
          }
        ]
      }
    };

    get tableColumn () {
      return {
        rowno: {
          label: '行号',
          width: 80
        },
        phidMaterial: {
          label: '物料编码',
          width: 140
        },
        matrialName: {
          label: '物料名称',
          width: 140
        },
        unitName: {
          label: '单位',
          width: 80
        },
        price: {
          label: '单价',
          width: 120
        },
        sgsName: {
          label: '收货商',
          width: 150
        },
        telephone: {
          label: '电话',
          width: 120
        }
      }
    }
    init () {
      const {_alias: alias, phid: id} = this.$route.query
      this.id = id as string
      this.alias = alias as string
      this.getDetail()
      this.getAreaList()
      // this.getFile()
    }

    // 确定项目
    confirmProject (val:any, cb:any) {
      this.projectid = val.ncProjectId
      this.orgid = val.pkOrg
      this.form.projectName = val.ncProjectName
      this.form.orgName = val.orgName
      this.formVisible = false
    }

    // 确定人员
    confirmMember (val:any, cb:any) {
      this.form.telephone = val.memberPhone
      // this.form.deptName = val.deptNames
      this.form.phidApplyman = val.memberId
      this.form.registerName = val.memberName
      this.memberFormVisible = false
    }

    // 确定部门
    confirmDept (val:any, cb:any) {
      this.form.phidDept = val.pkDept
      this.form.deptName = val.deptName
      this.deptFormVisible = false
    }

    // 确定登记单
    confirmRegister (val:any, cb:any) {
      this.form.phidRegister = val.phid
      this.registerFormVisible = false
    }

    // 确定申请单
    confirmApply (val:any, cb:any) {
      this.form.phidApply = val.phid
      // 查询申请单明细，填充进场单明细中
      this.$api.dealApplyDetailFetch({phid: val.phid}).then(({ data }: any) => {
        this.approachDetailVOList = data.dealApplyDetailVOList.map((item: any) => {
          // 主表主键
          item.phidApproach = this.id
          // 申请单id
          item.phidApplyBody = item.phid
          // 行号
          // item.rowno = item.rowno;
          // 物料主键id
          // item.phidMaterial = item.phidMaterial;
          // 收购商id
          item.phidSgs = item.phidBjinfo;
          // 单位id
          // item.phidUnit = item.phidUnit;
          // 单价
          // item.price = item.price;
          // 单位id
          // item.telephone = item.telephone;
        })
        this.approachDetailVOList = data.dealApplyDetailVOList;
      })
      this.applyFormVisible = false
    }

    // 详情
    getDetail () {
      if (this.id) {
        this.$api.approachDetailFetch({phid: this.id}).then(({ data }: any) => {
          this.orgid = data.approachHeadVO.phidOrg
          this.projectid = data.approachHeadVO.phidProject;
          this.form = data.approachHeadVO // 基础信息
          this.form.hasCardnum = Number(data.approachHeadVO.hasCardnum);
          data.fileStoreList.map((item: any) => {
            item.uid = item.fileId;
            item.name = 'image.png';
          })
          this.fileList = data.fileStoreList // 图片列表
          this.approachDetailVOList = data.approachDetailVOList // 申请单明细
          this.form.complanyName = data.data.approachHeadVO.phidArea + '-' + data.data.approachHeadVO.complanyName
        })
      }
    }

    // 保存
    handleSubmit () {
      this.form.phidOrg = this.orgid
      this.form.phidProject = this.projectid
      if (this.form.complanyName.split('-')[1] !== undefined) {
        this.form.phidArea = this.form.complanyName.split('-')[0]
        this.form.complanyName = this.form.complanyName.split('-')[1]
      }
      let taskFile = this.countingTaskFileList.map((item: any) => ({
        fileUrl: this.$util.getPicUrl(item)
      }))
      const data = {
        approachHeadVO: this.form,
        approachDetailVOList: this.approachDetailVOList,
        fileStoreList: this.fileList
      }
      console.log('===========' + JSON.stringify(data))
      this.$api.approachAddModifyFetch(data).then(() => {
        this.$message.success('保存成功！')
        this.$router.back()
      })
    }

    // 附件
    getFile () {
      let data = { phid: this.id }
      this.$api.approachDetailFetch(data).then((res: any) => {
        this.countingTaskFileList = res.data.fileStoreList.map((item: any, index: number) => ({
          uid: -index - 1,
          url: item.fileUrl,
          name: item.fileUrl
        }))
        this.showUploadList = this.countingTaskFileList
      })
    }

    uploadSuccess (fileList: any) {
      this.countingTaskFileList = fileList;
      let list = JSON.parse(JSON.stringify(this.countingTaskFileList))
      this.showUploadList = list.map((item: any) => ({
        url: this.$util.getPicUrl(item)
      }))
    }
  }
</script>


<style lang="scss" scoped>
  #myPurchase-detail {
    .top-box{
      margin-bottom: 15px;
      .box-title{
        font-size: 16px;
        font-weight: 700;
        padding-left: 5px;
        color: #000;
        height: 15px;
        line-height: 15px;
        border-left: 3px solid rgb(62, 149, 231);
      }
    }
    .info{
      padding: 10px 0;
      .address{
        display: flex;
      }
      .info-left{
        width: 65px;
        margin-right: 10px;

      }
    }
    .container-title{
      font-size: 16px;
      font-weight: 700;
      padding-left: 5px;
      color: #000;
      height: 15px;
      line-height: 15px;
      border-left: 3px solid rgb(62, 149, 231);
    }
    .title-info{
      margin: 20px 0;
      font-size: 16px;
      .info-left{
        font-weight: 700;
      }
      .info-right{
        margin-right: 80px;
      }
    }
    .header-item{
      text-align: center;
    }
    .footer-btns {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 50px 0;
      .ant-btn {
        margin-right: 20px;
      }
    }

  }
  /deep/ .ant-select-selection-selected-value, .ant-input[disabled]{
    color: rgba(0, 0, 0, 0.8);
  }
  /deep/ .ant-input-number-input{
    color: rgba(0, 0, 0, 0.8) ;
  }
</style>
